import Mustache from "./src/index4.js";
// import Mustache from "./source/mustache.js";

// 阶段一代码
document.getElementById("stage-1").addEventListener("click", function () {
  var view = {
    name: "Chris",
    company: "<b>GitHub</b>",
  };

  var output = Mustache.render(
    `* {{name}}
* {{age}}
* {{company}}
* {{{company}}}`,
    view
  );

  document.getElementById("app").innerHTML = output;
});

// 二阶段
document.getElementById("stage-2").addEventListener("click", function () {
  var view = {
    person: false,
  };

  var output = Mustache.render(
    `Shown.
{{# person }}
Never shown!
{{/person}}`,
    view
  );

  document.getElementById("app").innerHTML = output;
});

// 三阶段
document.getElementById("stage-3").addEventListener("click", function () {
  var view = {
    repo: [{ name: "resque" }, { name: "hub" }, { name: "rip" }],
  };

  var output = Mustache.render(`{{#repo}} <b>{{name}}</b> {{/repo}}`, view);

  document.getElementById("app").innerHTML = output;
});

// 四阶段
document.getElementById("stage-4").addEventListener("click", function () {
  var view = {
    name: "Willy",
    wrapped: function () {
      return function (text, render) {
        return "<b>" + render(text) + "</b>";
      };
    },
  };

  var output = Mustache.render(
    `{{#wrapped}}{{name}} is awesome.{{/wrapped}}`,
    view
  );

  document.getElementById("app").innerHTML = output;
});

// 五阶段
document.getElementById("stage-5").addEventListener("click", function () {
  var view = {
    "person?": { name: "Jon" },
  };

  var output = Mustache.render(`{{#person?}} Hi {{name}}! {{/person?}}`, view);

  document.getElementById("app").innerHTML = output;
});

// 六阶段
document.getElementById("stage-6").addEventListener("click", function () {
  var view = {
    repo: [],
  };

  var output = Mustache.render(
    `{{#repo}} <b>{{name}}</b> {{/repo}}
{{^repo}} No repos :( {{/repo}}`,
    view
  );

  document.getElementById("app").innerHTML = output;
});

// 七阶段
document.getElementById("stage-7").addEventListener("click", function () {
  var view = {};

  var output = Mustache.render(`<h1>Today{{! ignore me }}.</h1>`, view);

  document.getElementById("app").innerHTML = output;
});

// 八阶段
document.getElementById("stage-8").addEventListener("click", function () {
  var view = {
    names: [{ name: "Jack" }, { name: "Tom" }, { name: "Alex" }],
  };

  var output = Mustache.render(
    `<h2>Names</h2>
{{#names}}{{> user}}{{/names}}`,
    view,
    {
      user: `<strong>{{name}}</strong>`,
    }
  );

  document.getElementById("app").innerHTML = output;
});

// 九阶段
document.getElementById("stage-9").addEventListener("click", function () {
  var view = {
    default_tags: "这是默认标签的内容",
    erb_style_tags: "这是其他标签的内容",
    default_tags_again: "这又是默认标签的内容",
  };

  var output = Mustache.render(
    `* {{default_tags}}
  {{=<% %>=}}
* <% erb_style_tags %>
  <%={{ }}=%>
* {{ default_tags_again }}`,
    view
  );

  document.getElementById("app").innerHTML = output;
});

// 十阶段
document.getElementById("stage-10").addEventListener("click", function () {
  var view = {
    "person?": { name: "Jon" },
    school: "浙江大学",
  };

  var output = Mustache.render(
    `{{#person?}}
    你好 {{name}}! 欢迎来到 {{school}}!
  {{/person?}}`,
    view
  );

  document.getElementById("app").innerHTML = output;
});

// 十一阶段
document.getElementById("stage-11").addEventListener("click", function () {
  var view = {
    "person?": { name: "Jon" },
    school: { name: "浙江大学" },
  };

  var output = Mustache.render(
    `{{#person?}}
    你好 {{name}}! 欢迎来到 {{school.name}}!
  {{/person?}}`,
    view
  );

  document.getElementById("app").innerHTML = output;
});

// 十二阶段
document.getElementById("stage-12").addEventListener("click", function () {
  var view = {
    repo: ["resque", "hub", "rip"],
  };

  var output = Mustache.render(`{{#repo}} <b>{{.}}</b> {{/repo}}`, view);

  document.getElementById("app").innerHTML = output;
});

// 十三阶段
document.getElementById("stage-13").addEventListener("click", function () {
  var view = {
    name: "张三",
    hello() {
      return `hello ${this.name}`;
    },
  };

  var output = Mustache.render(`<p>{{ hello }}</p>`, view);

  document.getElementById("app").innerHTML = output;
});

// 十四阶段
document.getElementById("stage-14").addEventListener("click", function () {
  var view = {
    repo: ["resque", "hub", "rip"],
  };

  var output = Mustache.render(
    `{{#repo}}
<b>{{.}}</b>
 {{/repo}}`,
    view
  );

  document.getElementById("app").innerHTML = output;
});
